<!-- Horizontal Form -->
<div id="page-wrapper">
<div class="box box-info">
	<div class="box-header with-border">
		<h3 class="box-title">添加试卷</h3>
	</div>
	<!-- /.box-header -->
	<!-- form start -->
	<form class="form-horizontal">
		<div class="box-body">
			<div class="form-group"></div>
			<div class="form-group">
				<label for="content" class="col-sm-2 control-label">试题:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="content"
						placeholder="请输入试题的内容">
				</div>
			</div>
			<!-- 选项A -->
			<div class="form-group">
				<label for="choiceA" class="col-sm-2 control-label">选项A:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="choiceA"
						placeholder="请输入选项A的内容">
				</div>
			</div>
			<!-- 选项B -->
			<div class="form-group">
				<label for="choiceB" class="col-sm-2 control-label">选项B:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="choiceB"
						placeholder="请输入选项B的内容">
				</div>
			</div>
			<!-- 选项C -->
			<div class="form-group">
				<label for="choiceC" class="col-sm-2 control-label">选项C:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="choiceC"
						placeholder="请输入选项C的内容">
				</div>
			</div>
			<!-- 选项D -->
			<div class="form-group">
				<label for="choiceD" class="col-sm-2 control-label">选项D:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="choiceD"
						placeholder="请输入选项D的内容">
				</div>
			</div>
			<!-- 答案 -->
			<div class="form-group">
				<label for="answer" class="col-sm-2 control-label">答案:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="answer"
						placeholder="请输入答案的内容">
				</div>
			</div>

			<!-- 题目类型的ztree -->
			<!--ztree需要的框  -->
			<div class="form-group">
				<label for="parentId" class="col-sm-2 control-label">题目类型</label>
				<div class="col-sm-10">
					<input type="text" class="form-control load-sys-question"
						readonly="readonly" id="parentId" placeholder="题目类型">
				</div>
			</div>
			<!-- 输入从ztree上看到的题的类型的id -->
			<div class="form-group">
				<label for="examType_id" class="col-sm-2 control-label">题类型的Id:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="examType_id"
						placeholder="输入从ztree上看到的题的类型的id">
				</div>
			</div>


			<!--到这里结束  -->
		</div>
		<!-- /.box-body -->
		<div class="box-footer">
			<button type="button" class="btn btn-default btn-cancel">Cancel</button>
			<button type="button" class="btn btn-info pull-right btn-save">Save</button>
		</div>
		<!-- /.box-footer -->
	</form>




	<!-- zTree 对应的div -->
	<div class="layui-layer layui-layer-page layui-layer-molv layer-anim"
		id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index: 59891016; width: 300px; height: 450px; top: 100px; left: 500px; display: none">
		<div class="layui-layer-title" style="cursor: move;">选择题型</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>
				<!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a
			class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a> <a
				class="layui-layer-btn1 btn-cancel">取消</a>
		</div>
	</div>







</div>
</div>
<script type="text/javascript"
	src="../static/bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../static/bower_components/layer/layer.js">
	
</script>


<script type="text/javascript">
	var zTree; //zTree是第三方扩展的一个Jquery插件
	//初始化zTree时会用到
	var setting = {
		data : {
			simpleData : {
				enable : true,
				idKey : "id", //节点数据中保存唯一标识的属性名称
				pIdKey : "parentId", //节点数据中保存其父节点唯一标识的属性名称
				rootPId : null//根结点
			//根节点id
			},
		//json 格式javascript对象
		}
	}//json 格式的javascript对象
	/* 页面加载完成,异步加载数据,事件注册 */
	$(function() {
		//加载菜单树的事件注册
		$(".form-group").on("click", ".load-sys-question", doLoadZtreeNodes);
		//确定和却小按钮按钮事件注册
		$(".box-footer").on("click", ".btn-cancel", doCancel)//取消按钮,方法下面有
		// 保存和更新 都会转到doSaveOrUpdate
		.on("click", ".btn-save,.btn-update", doSaveOrUpdate)//保存和更新按钮,方法下面有

		//menuLayer中按钮事件注册
		$("#menuLayer").on("click", ".btn-confirm", doSetSelectedNode)//展开结点,方法下面有
						.on("click", ".btn-cancel", doHideZtree);//缩回按钮,方法下面有
		//=========================  

		//获取 mainContentId上值:页面加载完成之后绑定的数据
		var rowData = $("#mainContentId").data("rowData");
		//假如有值说明是修改,则基于此值初始化编辑页面.
		//本来就是有值,只是修改,所以rowData的值不为空,所以是修改
		if (rowData)
			doInitEditFormData(rowData);//编辑页面
	});
	//初始化表单数据
	function doInitEditFormData(rowData) {
		$("#content").val(rowData.content);
		$("#choiceA").val(rowData.choiceA);
		$("#choiceB").val(rowData.choiceB);
		$("#choiceC").val(rowData.choiceC);
		$("#choiceD").val(rowData.choiceD);
		$("#answer").val(rowData.answer);
		$("#parentId").val(rowData.name);
		$("#parentId").data("parentId", rowData.parentId);
		$("#examType_id").val(rowData.examType_id);
	}
	//回到列表页面
	function doCancel() {
		var url = "question/question_list";
		$("#mainContentId").load(url);
	}
	//将表单数据发送到服务端:添加或者更新
	function doSaveOrUpdate() {
		//debugger
		//1.获取表单中用户输入数据
		var params = doGetEditFormData();//获取表单里的数据
		var rowData = $("#mainContentId").data("rowData");//扫描表单里的数据,存入mainContentId中
		if (rowData)//如果为true,说明有数据,可以进行更新
			params.id = rowData.id;
		//2.定义url
		var insertUrl = "question/doSaveObject";//添加
		var updateUrl = "question/doUpdateObject";//修改
		var url = rowData ? updateUrl : insertUrl;//是更新还是保存的判定
		//3.异步提交数据
		$.post(url, params, function(result) {//用post方式传送数据:地址,参数,function(data){} 
			if (result.state == 1) {//result:请求成功时执行的回调函数
				alert(result.message);//显示结果
				doCancel();
			} else {
				alert(result.message);
			}
		});
	}
	function doGetEditFormData() {//获取框中的内容
		var params = {
			"content" : $("#content").val(),
			"choiceA" : $("#choiceA").val(),
			"choiceB" : $("#choiceB").val(),
			"choiceC" : $("#choiceC").val(),
			"choiceD" : $("#choiceD").val(),
			"answer" : $("#answer").val(),
			"name" : $("#parentId").val(),//获取选中的zTree中的内容
			"examType_id" : $("#examType_id").val()
		}
		return params;
	}

	//设置选中节点(上级菜单)
	function doSetSelectedNode() {
		console.log(zTree);
		//1.获取选中节点
		var nodes = zTree.getSelectedNodes();
		if (!nodes || nodes.length == 0) {//初始状态都是缩回的
			doHideZtree();
			return;
		}
		//2.将选中节点内容填充到页面
		$("#parentId").data("parentId", nodes[0].id);
		//$("#parentId").val(nodes[0].name);
		$("#parentId").val(nodes[0].name);
		//3.隐藏zTree
		doHideZtree();
	}
	//隐藏zTree
	function doHideZtree() {
		$("#menuLayer").css("display", "none");
	}
	//加载zTree菜单
	function doLoadZtreeNodes() {

		//1.url
		var url = "question/doFindZtreeExamTypeNodes";//写在后台中的url

		//2.request
		$.getJSON(url, function(result) {
			console.log(result);
			if (result.state == 1) {
				zTree = $.fn.zTree.init($("#menuTree"), setting, result.data);
				//alert("hello");
				$("#menuLayer").css("display", "block");
			} else {
				alert(result.message);
			}
		});

	}
</script>








